import React, { useEffect, useRef, useState } from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { MoonFallIcon, SunnyIcon } from "tdesign-icons-react";
import {
  Button,
  Layout,
  Menu,
  Space,
  Switch,
  Textarea,
  message,
  notification,
} from "tdesign-react";
import "tdesign-react/es/style/index.css";
import Menus from "./components/Menus";
import Home from "./pages/Home";
import Sender from "./pages/Sender";
import PdfReader from "./pages/PdfReader";
import "./App.less";
import Chat from "./pages/Chat";
import MessageUtil from "./utils/Message";
import { getRandomString } from "./utils";
import messageStore from "./store/MessageStore";

const { Header, Content, Aside } = Layout;
export default function App() {
  const [text, setText] = useState("");
  const messageUtilRef = useRef(null);
  const handleThemeChange = (value) => {
    if (value) {
      // 设置暗色模式
      document.documentElement.setAttribute("theme-mode", "dark");
    } else {
      // 重置为浅色模式
      document.documentElement.removeAttribute("theme-mode");
    }
  };

  useEffect(() => {
    const messageUtil = new MessageUtil();
    messageUtilRef.current = messageUtil;

    console.log("MessageUtil -->", messageUtil);
  }, []);

  const handleSend = () => {
    messageUtilRef.current.textContent = text;
    messageUtilRef.current.roomId = "lasida";
    messageUtilRef.current.nickName = window.nickName;
    messageUtilRef.current.recordId = getRandomString();
    messageUtilRef.current.sendChatingRoom();
    message.success("发送成功");
  };

  const joinRoom = (roomId) => {
    messageUtilRef.current.roomId = roomId || "lasida";
    messageUtilRef.current.nickName = window.nickName;
    messageUtilRef.current.useLocalNetworkRoomShare = false;
    messageUtilRef.current.network = "wifi";
    messageUtilRef.current.createFileRoom();
    messageUtilRef.current.createFileRoom();
    message.success("加入房间成功");
  };

  const sendMsg = (data) => {
    debugger;
    messageUtilRef.current.textContent = data.content;
    messageUtilRef.current.roomId = data.room;
    messageUtilRef.current.nickName = "拉斯达";
    messageUtilRef.current.recoderId = getRandomString();
    messageUtilRef.current.sendChatingRoom();
    message.success("发送成功");
  };
  useEffect(() => {
    const handleAddMessageListener = (e) => {
      if (e.origin !== location.origin) return;
      switch (e.data?.type) {
        case "joinRoom":
          console.log("加入房间 ----->", e.data.data);
          joinRoom(e.data.data);
          break;
        case "sendMsg":
          sendMsg(e.data.data);
      }
    };

    window.addEventListener("message", handleAddMessageListener);

    return () => {
      window.removeEventListener("message", handleAddMessageListener);
    };
  });
  console.log("------>", messageStore, messageUtilRef);

  return (
    <BrowserRouter>
      <Layout className="jj-zhilian">
        <Aside>
          <Menus />
        </Aside>
        <Layout>
          <Header className="jj-sender-header">
            <Space>
              <Switch
                size="large"
                label={[<MoonFallIcon />, <SunnyIcon color="#333" />]}
                onChange={handleThemeChange}
              />
              <span>暗黑模式</span>
            </Space>
          </Header>
          <Content className="content">
            <Routes>
              <Route path="/pdf" element={<PdfReader />} />
              <Route path="/sender" element={<Sender />} />
              <Route path="/chat" element={<Chat />} />
              <Route path="/" element={<Home />} />
            </Routes>
          </Content>
          <Textarea onChange={(e) => setText(e)}></Textarea>
          <Space>
            <Button onClick={() => joinRoom('lasida')}>加入房间</Button>
            <Button onClick={handleSend}>发送</Button>
            <Button onClick={() => console.log(messageUtilRef.current)}>
              打印
            </Button>
          </Space>
        </Layout>
      </Layout>
    </BrowserRouter>
  );
}
